<template>
  <div class="artist-album"
       v-if="artistId!=null">
    <artist-hot50 :musiclist="musiclist" />
    <div class="artistalbum">
      <div class="artist-ablum-item"
           v-for="(item,index) in albumlist"
           :key="index"
           @click="enterDetial(item)">
        <div class="bckimg">
          <img :src="item.blurPicUrl"
               alt="">
        </div>
        <p>{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import ArtistHot50 from '../childComps/ArtistHot50'
import { _getArtistHot50, _getArtistAlbum } from 'network/artist'
import { _getSongsDetail, SongDetail } from 'network/detail'
export default {
  name: 'ArtistAlbum',
  data () {
    return {
      // 当前进入的歌手
      artistId: 0,
      // 该歌手热门前50的音乐
      musiclist: [],
      albumlist: []
    }
  },
  components: {
    ArtistHot50
  },
  created () {
    // 歌手的id
    this.artistId = this.$route.params.id;
    this.$parent.artistId = this.artistId
    if (this.artistId !== null) {
      // 获取热门前50歌曲
      _getArtistHot50(this.artistId).then(res => {
        const songs = res.data.songs
        for (const i in songs) {
          // 歌曲细节
          _getSongsDetail(songs[i].id).then(res => {
            const song = new SongDetail(res.data.songs)
            this.musiclist.push(song)
          })
        }
      })
      // 获取歌手所有专辑
      _getArtistAlbum(this.artistId).then(res => {
        this.albumlist = res.data.hotAlbums
      })
    }
  },
  methods: {
    // 专辑详情
    enterDetial (item) {
      this.$router.push('/album/' + item.id)
    }
  }
}
</script>

<style scoped>
.artist-album {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #333;
}
.artistalbum {
  width: 100%;
  margin-top: 20px;
}
.artist-ablum-item {
  width: 160px;
  float: left;
  margin: 10px 12px;
}
.bckimg {
  width: 150px;
  height: 130px;
  background: url("../../../assets/img/newest/coverall.png") no-repeat;
  background-position: 0 -845px;
}
.bckimg img {
  width: 130px;
  height: 130px;
}
</style>
